<template>
    <div style="display:flex; justify-content: flex-end; margin: 40px 30px 0 0;">
        <el-select v-model="fileShowState" placeholder="请选择选择状态" size="small">
            <el-option v-for="item in fileShowStateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
    <div class="file">
        <div class="content">
            <template v-for="fileImgVideo in fileImgVideoList">
                <template v-for="( item ) in fileImgVideo.data" :key="item.id" v-if="fileImgVideo.type === 'folders'">
                    <div class="multi-media shadow" @click="clickFolder(item.id)" style="cursor: pointer;">
                        <el-image :src="RequireURL + '/static/icon/folder.png'" fit="cover" :zoom-rate="1.2"
                            class="img folder" />
                        <div class="title">{{ item.fileName }}</div>
                    </div>
                </template>


                <template v-for="( item ) in fileImgVideo.data" :key="item.id" v-if="fileImgVideo.type === 'videos'">
                    <div class="multi-media shadow" style="cursor: pointer;" @click.stop="toWatch(item.id)">
                        <el-image :src="item.thumbnailPath" fit="cover" :zoom-rate="1.2" class="img" lazy />
                        <div class="title">视频 - {{ item.fileName.replace(/\..*/, '') }}</div>
                        <div class="tipsBox">
                            <div class="ext"> <span class="dot"></span> {{ item.ext.replace(".", "") }}</div>
                            <div class="sizebox">{{ computedSize(item.size) }}</div>
                        </div>
                        <div class="duration">{{ formatDuration(item.duration) }}</div>
                    </div>
                </template>


                <template v-for="( item ) in  fileImgVideo.data" :key="item.id" v-if="fileImgVideo.type === 'imgs'">
                    <div class="multi-media shadow">
                        <el-image :src="item.thumbnailPath ? item.thumbnailPath : item.path" fit="cover" :zoom-rate="1.2"
                            :preview-src-list="srcList" :initial-index="showImgIndex" class="img" lazy
                            @click="imgClick(item.path)" />
                        <div class="title">{{ item.fileName.replace(/\..*/, '') }}</div>
                        <div class="tipsBox">
                            <div class="ext"> <span class="dot"></span> {{ item.ext.replace(".", "") }}</div>
                            <div class="sizebox">{{ computedSize(item.size) }}</div>
                        </div>
                    </div>
                </template>
            </template>



        </div>
    </div>
</template>

<script lang="ts" setup>
import { RequireURL } from "../util/const"
import { usePathStore } from "../store/index"
import { useRouter } from "vue-router"
import { storeToRefs } from "pinia"
import { ref, computed } from "vue"
import { formatDuration } from "../util/utils"
const router = useRouter()
const pathStore = usePathStore()

const { imgs, videos, folders, srcList } = storeToRefs(pathStore)
const showImgIndex = ref(0)



const fileShowState = ref(1)
const fileShowStateList = [
    {
        label: "正序",
        value: 1
    },
    {
        label: "倒序",
        value: 2
    },
]


const fileImgVideoList = computed(() => {
    let arr = [
        {
            type: "folders",
            data: folders.value
        },
        {
            type: "videos",
            data: videos.value
        },
        {
            type: "imgs",
            data: imgs.value
        }
    ]
    if (fileShowState.value == 2) {
        arr.forEach(item => {
            item.data.reverse()
        })
        arr.reverse()
    }
    return arr
})

/**
 * @description: 计算内存大小
 * @param {*} size
 * @return {*}
 * @author: tao wenbo 2419421809@qq.com
 */
function computedSize(size: number) {
    let danwei = "k"
    size = size / 1024
    if (size > 1024) {
        danwei = "m"
        size = size / 1024
    }
    if (size > 1024) {
        danwei = "G"
        size = size / 1024
    }
    return `${size.toFixed(2)} ${danwei}`
}

/**
 * @description: 视频跳转到新窗口观看
 * @param {*} path
 * @return {*}
 * @author: tao wenbo 2419421809@qq.com
 */
const toWatch = (id: number) => {
    // window.open(path, "_search");
    router.push({
        path: `/video/${id}`
    })
}

/**
 * @description: 点击的是文件夹时
 * @param {*} name
 * @return {*}
 * @author: tao wenbo 2419421809@qq.com
 */
function clickFolder(id: number) {
    router.push(`/file/${id}`)
    pathStore.getDirById(id);
}

// 图片被点击了
function imgClick(path: string) {
    showImgIndex.value = pathStore.addSrcList(path)
}

</script>
<style lang="scss">
.file {
    $color_fff: #fff;
    $fontCol: #03081a;

    .content {
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        padding: 20px;

        .shadow {
            box-shadow: 0 1px 9px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .multi-media {
            $multi-media_width: 150px;
            $count: 1;
            $count_1: 1;
            $count_2: 2;
            $count_4: 4;
            $count_6: 5;
            $count_8: 6;

            @media(max-width: 380px) {
                margin: 20px calc((100% - $multi-media_width * $count_1 ) / $count_1 / 2);
            }

            @media (min-width: 380px) and (max-width: 680px) {
                margin: 20px calc((100% - $multi-media_width * $count_2 ) / $count_2 / 2);
            }

            @media (min-width: 680px) and (max-width: 980px) {
                margin: 20px calc((100% - $multi-media_width * $count_4 ) / $count_4 / 2);
            }

            @media (min-width: 980px) and (max-width: 1280px) {
                margin: 20px calc((100% - $multi-media_width * $count_6 ) / $count_6 / 2);
            }

            @media (min-width: 1280px) {
                margin: 20px calc((100% - $multi-media_width * $count_8 ) / $count_8 / 2);
            }

            // $count: 6;
            display: flex;
            flex-direction: column;

            width: $multi-media_width;
            padding: 0 0 10px 0;
            box-sizing: border-box;
            position: relative;

            $img_Height: 160px;
            $content_margin: 10px 10px 0 10px;

            .duration {
                position: absolute;
                background-color: rgba($color: #95d475, $alpha: 0.9);
                padding: 2px 16px;
                color: #fff;
                border-radius: 16px;
                font-size: 15px;
                top: 10px;
                left: 8px;
            }

            .tipsBox {
                display: flex;
                justify-content: space-between;
                margin: $content_margin;
                font-size: 13px;

                .ext {
                    display: flex;
                    align-items: center;
                    color: rgba($color: $fontCol, $alpha: 0.6);

                    .dot {
                        display: block;
                        width: 6px;
                        height: 6px;
                        border-radius: 3px;
                        background-color: #95d475;
                        margin: 0 6px 0 0;
                    }
                }

                .sizebox {
                    background-color: #95d475;
                    color: #fff;
                    padding: 2px 8px;
                    border-radius: 20px;

                }
            }


            .img {
                width: 100%;
                height: $img_Height;
                border-radius: 8px;
            }

            .folder {
                cursor: pointer;
            }

            .title {
                color: rgba($color: $fontCol, $alpha: 0.6);
                word-break: break-all;
                white-space: pre-wrap;
                word-wrap: break-word;
                overflow: hidden;
                text-align: center;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                margin: 10px 10px 0 10px;
            }

            .video {
                width: 110px;
                height: 127px;
                cursor: pointer;
            }
        }

    }
}
</style>